<template>
    <div>
        <el-dialog v-model="dialogVisible" title="事件统计图" width="40%" top="10vh" :before-close="changeChartVisible">
            <div class="container">
                <div class="btn-box">
                    <el-button type="success" @click="toggleType">按类型统计</el-button>
                    <el-button type="success" @click="toggleMonth">按月份统计</el-button>
                </div>
                <div class="title">
                    <span>交通事件({{ count }}起)</span>
                    <div class="function-box">
                        <el-icon @click="refresh">
                            <Refresh />
                        </el-icon>
                        <el-icon @click="exportPic">
                            <Download />
                        </el-icon>
                    </div>
                </div>
                <v-chart class="chart" :option="showData" style="width: 600px;height:300px;"></v-chart>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { Query } from "../../../utils/Query"
import "echarts"
import html2Canvas from 'html2canvas';
import FileSaver from 'file-saver';
import { Download, Refresh } from "@element-plus/icons-vue"

const dialogVisible = true
//按类型统计
const typeChart = ref({})
//按月份统计
const monthChart = ref({})
const count = ref(0)

const showData = ref({})

const props = defineProps(["chartVisible","changeChartVisible"])

const service = {
    name: "guanggu",
    layerId: 2
}

onMounted(()=>{
    Query.queryByLayerId({
        service,
        callback: handleQuery
    })
})

const handleQuery = (result) => {
    count.value = result.SFEleArray.length
    const typeArr = ref([])
    const monthArr = ref([])
    result.SFEleArray.forEach(item => {
        typeArr.value.push(item.AttValue[1])
        monthArr.value.push(+item.AttValue[3].split(".")[1])
    })
    //生成按类型统计 数据
    const typeClass = typeArr.value.reduce((res, cur) => {
        res[cur] ? res[cur]++ : res[cur] = 1
        return res;
    }, {})
    //按类型统计
    const typeChartData = ref([])
    for (let key in typeClass) {
        typeChartData.value.push({
            name: key,
            value: typeClass[key]
        })
    }
    //生成按月份统计 数据
    const monthClass = monthArr.value.reduce((res, cur) => {
        res[cur] ? res[cur]++ : res[cur] = 1
        return res;
    }, {})
    //按月份统计
    const monthChartData = ref([])
    for (let key in monthClass) {
        monthChartData.value.push({
            name: key,
            value: monthClass[key]
        })
    }
    monthChartData.value = monthChartData.value.sort((a, b) => a.name - b.name)
    monthChartData.value.forEach(item => {
        item.name = item.name + "月"
    })
    typeChart.value = {
        //data中必有要有name属性 legend才会显示
        legend: {
            orient: "vertical",
            right: "0",
            top: '16%',
            formatter: (name) => {
                const _item = typeChartData.value.find(item => {
                    return item.name === name
                })
                return name + " " + _item.value + "起"
            },
            textStyle: {
                color: 'gray'
            }
        },
        tooltip: {
            trigger: 'item', //鼠标移入后显示的效果
            formatter: (params) => {
                const res = "访问来源" +
                    "<br/>" + params.data.name + " " + params.data.value + `(${((params.data.value / count.value) * 100).toFixed(2)}%)`
                return res
            }
        },
        series: [
            {
                type: 'pie',
                data: typeChartData.value,
            }
        ]
    }
    monthChart.value = {
        //data中必有要有name属性 legend才会显示
        legend: {
            orient: "vertical",
            right: "0",
            top: '16%',
            formatter: (name) => {
                const _item = monthChartData.value.find(item => {
                    return item.name === name
                })
                return name + " " + _item.value + "起"
            },
            textStyle: {
                color: 'gray'
            }
        },
        tooltip: {
            trigger: 'item', //鼠标移入后显示的效果
            formatter: (params) => {
                const res = "访问来源" +
                    "<br/>" + params.data.name + " " + params.data.value + `(${((params.data.value / count.value) * 100).toFixed(2)}%)`
                return res
            }
        },
        series: [
            {
                type: 'pie',
                data: monthChartData.value,
            }
        ]
    }
    showData.value = typeChart.value
}
const toggleType = () => {
    showData.value = typeChart.value
}
const toggleMonth = () => {
    showData.value = monthChart.value
}
const refresh = () => {
    Query.queryByLayerId({
        service,
        callback: handleQuery
    })
}
const exportPic = () => {
    html2Canvas(document.querySelector('.chart'), {
        allowTaint: true,
    }).then(function (canvas) {
        canvas.toBlob(function (blob) {
            FileSaver.saveAs(blob, '事件统计图.png');
        });
    });
}
</script>

<style lang="scss" scoped>
.chart {
    margin: 0 auto;
    padding-right: 40px;
}

.title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px 40px 0;

    span {
        font-size: 17px;
        font-weight: 600;
        color: #333;
    }

    .function-box {
        .el-icon {
            font-size: 18px;
            margin-right: 10px;
            cursor: pointer;
        }
    }
}


:deep(.el-dialog__header) {
    padding: 20px 20px;
    border-bottom: 1px solid #c7c7c7;
    margin-right: 0;
}

:deep(.el-dialog__body) {
    padding-top: 10px;
}
</style>